<template>
    <div class="app-container">
        <el-form ref="searchForm" inline :model="searchForm" style="position:relative;">
            <el-row>
                <el-col :span="20">
                    <el-form-item label="所属栏目：" prop="columnId">
                        <el-cascader clearable :options="parentOpt" :props="optionProps" v-model="searchForm.columnId" change-on-select></el-cascader>
                    </el-form-item>
                    <el-form-item label="标题：" prop="title">
                        <el-input clearable v-model="searchForm.title" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="摘要：" prop="summary">
                        <el-input clearable v-model="searchForm.summary" placeholder="请输入"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="关键字：" prop="keyword">
                        <el-input clearable v-model="searchForm.keyword" placeholder="请输入"></el-input>
                    </el-form-item> -->
                    <el-button @click="init('search')" type="primary">查询</el-button>
                </el-col>
                <el-col :span="4">
                    <el-button @click="addClick" type="primary" style="position: absolute;right: 0;">添加</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData" border style="width: 100%;margin: 20px 0px;">
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="parentList" :formatter="parentListFun" label="所属栏目"></el-table-column>
            <el-table-column label="视频" align="center">
                <template slot-scope="scope">
                    <!-- <video v-if="scope.row.name" :src="scope.row.showvideo" width="50" height="50" alt="/视频" @click="enlargeFun(1,scope.row.showvideo)"></video> -->
                    <video v-if="scope.row.name" :src="scope.row.name" width="50" height="50" alt="/视频" @click="enlargeFun(1,scope.row.name)"></video>
                    <video v-else src="@/assets/image/default.png" width="50" height="50" alt="/视频"></video>
                </template>
            </el-table-column>
            <el-table-column label="封面图" align="center">
                <template slot-scope="scope">
                    <!-- <img v-if="scope.row.coverName" :src="scope.row.showpic" width="50" height="50" alt="/图片" @click="enlargeFun(2,scope.row.showpic)"> -->
                    <img v-if="scope.row.coverName" :src="scope.row.coverName" width="50" height="50" alt="/图片" @click="enlargeFun(2,scope.row.coverName)">
                    <img v-else src="@/assets/image/default.png" width="50" height="50" alt="/图片">
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" align="center"></el-table-column>
            <el-table-column prop="summary" label="摘要" align="center" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column prop="fileType" :formatter="fileTypeFun" label="文件类型" align="center"></el-table-column> -->
            <el-table-column prop="deviceType" :formatter="deviceTypeFun" label="设备类型" align="center"></el-table-column>
            <!-- <el-table-column prop="size" label="尺寸" align="center"></el-table-column>
            <el-table-column prop="duration" label="时长" align="center"></el-table-column>
            <el-table-column prop="width" label="宽度" align="center"></el-table-column>
            <el-table-column prop="height" label="高度" align="center"></el-table-column> -->
            <el-table-column prop="playCount" label="播放次数" align="center"></el-table-column>
            <!-- <el-table-column prop="baseTagList" label="标签" align="center" width="100">
                <template slot-scope="scope">
                    <el-tag v-for="(item,index) in scope.row.baseTagList" :key="index" size="small">{{item.title}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="keyword" label="关键词" align="center"></el-table-column> -->
            <!-- <el-table-column prop="solutionList" label="推荐方案" align="center" width="160">
                <template slot-scope="scope">
                    <el-tag effect="plain" v-for="(item,index) in scope.row.setMealList" type='warning' :key="index" size="small" style="margin-right: 3px;">{{ item.name }}</el-tag>
                </template>
            </el-table-column> -->
            <el-table-column prop="sort" label="顺序值" align="center"></el-table-column>
            <el-table-column prop="usingStatus" :formatter="usingStatusFun" label="可用性" align="center"></el-table-column>
            <el-table-column label="操作" width="220" fixed="right" align="center">
                <template slot-scope="scope">
                    <el-button @click.stop="editClick(scope.row)" :disabled="(scope.row.usingStatus != 1)" type="primary" plain size="mini">编辑</el-button>
                    <el-button @click.stop="statusClick(scope.row)" type="warning" plain size="mini">{{(scope.row.usingStatus == 1) ? '禁用' : '启用'}}</el-button>
                    <el-button @click.stop="delClick(scope.row)" type="danger" plain size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="getList" layout="total, prev, pager, next, jumper" :total="pageData.totalElements"></el-pagination>
        <!-- 弹框 -->
        <el-dialog :visible.sync="showDialog" width="800px">
            <el-form ref="dataForm" :rules="rules" :model="dataForm" label-position="left" label-width="100px" style="margin: 0px 50px;">
                <el-form-item label="所属栏目：" prop="columnId">
                    <el-cascader clearable :options="parentOpt" :props="optionProps" @change="columnChange" v-model="columnId" change-on-select placeholder="必选项。请选择所属栏目" style="width: 100%;"></el-cascader>
                </el-form-item>
                <el-form-item label="封面图：" prop="coverName">
                    <el-upload class="avatar-uploader" action="" :http-request="UploadImage" :show-file-list="false" :before-upload="beforeAvatarUpload" >
                        <img v-if="imageUrl" @click="nowUpload(1)" :src="imageUrl" class="avatar" width="100%">
                        <i v-else @click="nowUpload(1)" class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="视频：" prop="name">
                    <el-upload class="avatar-uploader" action="" :http-request="UploadImage" :show-file-list="false" :before-upload="beforeAvatarUpload" >
                        <video v-if="videoUrl" @click="nowUpload(2)" :src="videoUrl" controls class="avatar" width="100%"></video>
                        <i v-else @click="nowUpload(2)" class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="标题：" prop="title">
                    <el-input v-model="dataForm.title" placeholder="必填项。请输入标题，长度为1-30位" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="摘要：" prop="summary">
                    <el-input type="textarea" v-model="dataForm.summary" placeholder="必填项。请输入摘要"></el-input>
                </el-form-item>
                <el-form-item label="宽度：" prop="width">
                    <el-input v-model="dataForm.width" type="number" placeholder="请输入宽度" min="0"><template slot="append">px</template></el-input>
                </el-form-item>
                <el-form-item label="高度：" prop="height">
                    <el-input v-model="dataForm.height" type="number" placeholder="请输入高度" min="0"><template slot="append">px</template></el-input>
                </el-form-item>
                <el-form-item label="时长：" prop="duration">
                    <el-input v-model="dataForm.duration" type="number" placeholder="请输入时长" min="0"><template slot="append">s</template></el-input>
                </el-form-item>
                <el-form-item label="尺寸：" prop="size">
                    <el-input v-model="dataForm.size" type="number" placeholder="请输入尺寸" min="0"><template slot="append">M</template></el-input>
                </el-form-item>
                <!-- <el-form-item label="文件类型：" prop="fileType">
                    <el-select v-model="dataForm.fileType" placeholder="请选择文件类型" style="width: 100%;">
                        <el-option v-for="item in fileTypeOpt" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="设备类型：" prop="deviceType">
                    <el-select v-model="dataForm.deviceType" placeholder="请选择设备类型" style="width: 100%;">
                        <el-option v-for="item in deviceTypeOpt" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="播放次数：" prop="playCount">
                    <el-input v-model="dataForm.playCount" type="number" placeholder="请输入播放次数" min="0"></el-input>
                </el-form-item>
                <!-- <el-form-item label="标签：" prop="tagList">
                    <el-select v-model="tagList" multiple placeholder="请选择标题" style="width: 100%;">
                        <el-option v-for="item in tagListOpt" :key="item.id" :label="item.title" :value="item.id"></el-option>
                    </el-select>
                </el-form-item> -->
                <!-- <el-form-item label="推荐方案：" prop="solutionList">
                    <el-select v-model="solutionList" multiple placeholder="请选择推荐方案" style="width: 100%;">
                        <el-option v-for="item in solutionListOpt" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="关键词：" prop="keyword">
                    <el-input v-model="dataForm.keyword" placeholder="请输入关键词"></el-input>
                </el-form-item>
                <el-form-item label="顺序值：" prop="sort">
                    <el-input v-model="dataForm.sort" type="number" placeholder="请输入顺序值"></el-input>
                </el-form-item>
                <el-form-item label="可用性：" prop="usingStatus">
                    <el-select v-model="dataForm.usingStatus" placeholder="请选择可用性" style="width: 100%;">
                        <el-option v-for="item in usingStatusOpt" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="addSubmit('dataForm')" type="primary">保存</el-button>
                    <el-button @click="cancelClick('dataForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 图片弹框 -->
        <el-dialog :visible.sync="showPicDialog" width="1000px">
            <img v-if="typeStatus == 2" :src="nowPic" alt="" style="max-width: 100%;margin: 0 auto 15px;display: inherit" />
            <video v-if="typeStatus == 1" controls :src="nowPic" style="max-width: 100%;margin: 0 auto 15px;display: inherit"></video>
        </el-dialog>
    </div>
</template>
<script>
import { findColumn, getDirColumn } from '@/api/content/column'
import { findTag } from '@/api/content/tag'
import { findProduct } from '@/api/product/product'
import { creatRecord, findRecord, updateRecord, releaseRecord, delRecord } from '@/api/content/videos'
import { uploadPic, getPic } from '@/api/uploadPic'
import { isvalidInitNumber } from '@/utils/validate'
export default {
    name: 'Video',
    data() {
        var InitNumber=(rule, value,callback)=>{
            if(value){
                if(isvalidInitNumber(value)){
                    callback()
                }else{
                    callback(new Error('请输入整数'))
                }
            }else{
                callback()
            }
        }
        return{
            tableData: [],
            nowTit: '',
            nowId: '',
            showDialog: false,
            dataForm: {
                columnId: '',
                coverName: '',
                deviceType: 1,
                duration: '',
                // fileType: 1,
                height: '',
                keyword: '',
                playCount: '',
                size: '',
                solutionList: '',
                sort: '',
                summary: '',
                tagList: '',
                title: '',
                usingStatus: 1,
                width: '',
            },
            rules: {
                title: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                summary: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                sort: [
                    { trigger: 'blur', validator: InitNumber }
                ],
                playCount: [
                    { trigger: 'blur', validator: InitNumber }
                ],
            },
            searchForm: {
                columnId: [],
                title: '',
                summary: '',
                keyword: '',
            },
            nowPage: 0,
            pageSize: 10,
            imageUrl: '',
            videoUrl: '',
            popStatus: 0,  //0为添加，1为修改
            pageData: {},
            showPicDialog: false,
            nowPic: '',
            typeStatus: 1,
            usingStatusOpt: [
                {label: '启用', value: 1},
                {label: '禁用', value: 0}
            ],
            parentOpt: [],
            optionProps: {
                value: 'id',
                label: 'name',
                children: 'children'
            },
            columnId: [],
            solutionList: [],
            tagList: [],
            fileTypeOpt: [
                {label: 'jpg', value: 1},
                {label: 'png', value: 2},
                {label: 'gif', value: 3}
            ],
            deviceTypeOpt: [
                {label: 'pc', value: 1},
                {label: 'mobile', value: 2}
            ],
            uploadType: 1,  //1为图片  2为视频
            tagListOpt: [],
            solutionListOpt: [],
        }
    },
    methods: {
        //默认函数
        init(params){
            const _this = this;
            if(params == 'search'){
                _this.nowPage = 0
            }
            let cid = '';
            if(this.searchForm.columnId.length != 0){
                cid = this.searchForm.columnId[this.searchForm.columnId.length - 1];
            }
            _this.tableData = [];
            //获取列表信息
            findRecord({ columnId: cid, title: this.searchForm.title, summary: this.searchForm.summary, keyword: this.searchForm.keyword, page: this.nowPage, size: this.pageSize }).then(response => {
                if(response.code == 200){
                    if(response.object){
                        _this.pageData = response.object
                        _this.tableData = response.object.content
                        // if(response.object.content){
                        //     for (const key in response.object.content) {
                        //         //视频
                        //         if(response.object.content[key].name){
                        //             getPic(response.object.content[key].name).then(res => {
                        //                 if(res.code == 200){
                        //                     response.object.content[key].showvideo = res.object;
                        //                     //封面图
                        //                     if(response.object.content[key].coverName){
                        //                         getPic(response.object.content[key].coverName).then(res => {
                        //                             if(res.code == 200){
                        //                                 response.object.content[key].showpic = res.object;
                        //                                 _this.tableData.push(response.object.content[key]);
                        //                             }else{
                        //                                 this.$message.error(res.message);
                        //                             }
                        //                         })
                        //                     }else{
                        //                         response.object.content[key].showpic = '';
                        //                         _this.tableData.push(response.object.content[key]);
                        //                     }   
                        //                 }else{
                        //                     this.$message.error(res.message);
                        //                 }
                        //             })
                        //         }else{
                        //             response.object.content[key].showvideo = '';
                        //             //封面图
                        //             if(response.object.content[key].coverName){
                        //                 getPic(response.object.content[key].coverName).then(res => {
                        //                     if(res.code == 200){
                        //                         response.object.content[key].showpic = res.object;
                        //                         _this.tableData.push(response.object.content[key]);
                        //                     }else{
                        //                         this.$message.error(res.message);
                        //                     }
                        //                 })
                        //             }else{
                        //                 response.object.content[key].showpic = '';
                        //                 _this.tableData.push(response.object.content[key]);
                        //             }
                        //         }
                        //     }
                        // }
                    }
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        columnOpt(){
            const _this = this;
            //获取列表信息
            findColumn( '', '', '', 0, 10000).then(response => {
                if(response.code == 200){
                    if(response.object){
                        if(response.object.content){
                            const arr = response.object.content;
                            _this.parentOpt = _this.getTreeData(arr);
                        }
                    }
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //递归
        getTreeData(data){
            for(var i=0;i<data.length;i++){
                if(data[i].children.length<1){
                    data[i].children=undefined;
                }else {
                    this.getTreeData(data[i].children);
                }
            }
            return data;
        },
        solutionOpt(){
            const _this = this;
            //获取列表信息 
            findProduct(0,10000,'','',0).then(response => {
                if(response.code == 200){
                    if(response.object){
                        _this.solutionListOpt = response.object.content;
                    }
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        tagOpt(columnId){
            const _this = this;
            findTag({columnId: columnId, title: '', fileType: 2, page: 0, size: 10000}).then(response => {
                if(response.code == 200){
                    if(response.object){
                        if(response.object.content){
                            _this.tagListOpt = response.object.content;
                        }
                    }
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        columnChange(val){
            const columnId = val[val.length - 1];
            // this.tagOpt(columnId);
        },
        filterTag(value, row) {
            return row.tag === value;
        },
        //添加
        addClick(){
            this.popStatus = 0;
            this.showDialog = true;
            this.dataForm.columnId = '';
            this.columnId = [];
            this.dataForm.coverName = '';
            this.dataForm.name = '';
            this.dataForm.deviceType = 1;
            this.dataForm.duration = '';
            // this.dataForm.fileType = 1;
            this.dataForm.height = '';
            this.dataForm.keyword = '';
            this.dataForm.playCount = '';
            this.dataForm.size = '';
            this.dataForm.solutionList = '';
            this.solutionList = [];
            this.dataForm.sort = '';
            this.dataForm.summary = '';
            this.dataForm.tagList = '';
            this.tagList = [];
            this.dataForm.title = '';
            this.dataForm.usingStatus = 1;
            this.dataForm.width = '';
            this.imageUrl = '';
            this.videoUrl = '';
            if(this.dataForm.id){
                delete this.dataForm.id;
            }
        },
        //其他的表单校验
        otherValidate(){
            if(!this.dataForm.columnId){
                this.$message.warning('请选择所属栏目');
                return false
            }
            if(!this.dataForm.coverName){
                this.$message.warning('请上传封面图');
                return false
            }
            if(!this.dataForm.name){
                this.$message.warning('请上传视频');
                return false
            }
            return true
        },
        //提交添加
        addSubmit(formName){
            let _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //提交
                    _this.dataForm.columnId = this.columnId[this.columnId.length - 1];
                    _this.dataForm.tagList = _this.tagList.join(',');
                    _this.dataForm.solutionList = _this.solutionList.join(',');
                    //表单校验
                    _this.otherValidate();
                    if(!_this.otherValidate()){
                        return
                    }
                    if(_this.popStatus == 0){  //添加
                        creatRecord(_this.dataForm).then(response => {
                            if(response.code == 200){
                                this.$message.success(response.message);
                                _this.init();
                                _this.showDialog = false;
                            }else{
                                this.$message.error(response.message);
                            }
                        })
                    }else if(_this.popStatus == 1){  //修改
                        _this.dataForm.id = _this.nowId;
                        updateRecord(_this.dataForm).then(response => {
                            if(response.code == 200){
                                this.$message.success(response.message);
                                _this.init();
                                _this.showDialog = false;
                            }else{
                                this.$message.error(response.message);
                            }
                        })
                    }
                    
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //删
        delClick(row){
            let _this = this;
            this.$confirm('确定删除 '+ row.title +' 吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //删除
                delRecord({id:row.id}).then(response => {
                    if(response.code == 200){
                        this.$message.success(response.message);
                        _this.init();
                    }else{
                        this.$message.error(response.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //编辑
        editClick(row){
            this.popStatus = 1;
            this.nowId = row.id;
            this.dataForm.columnId = row.columnId;
            this.columnId.push(row.columnId);
            this.dataForm.name = row.name;
            this.dataForm.coverName = row.coverName;
            this.dataForm.deviceType = row.deviceType;
            this.dataForm.duration = row.duration;
            // this.dataForm.fileType = row.fileType;
            this.dataForm.height = row.height;
            this.dataForm.keyword = row.keyword;
            this.dataForm.playCount = row.playCount;
            this.dataForm.size = row.size;
            this.dataForm.sort = row.sort;
            this.dataForm.summary = row.summary;
            this.dataForm.tagList = row.tagList;
            if(row.tagList){
                this.tagList = row.tagList.split(',');
            }else{
                this.tagList = []
            }
            if(row.solutionList){
                this.solutionList = row.solutionList.split(',');
            }else{
                this.solutionList = []
            }
            this.dataForm.title = row.title;
            this.dataForm.usingStatus = row.usingStatus;
            this.dataForm.width = row.width;
            // if(row.name){
            //     this.videoUrl = row.showvideo;
            // }else{
            //     this.videoUrl = '';
            // }
            this.videoUrl = row.name
            // if(row.coverName){
            //     this.imageUrl = row.showpic;
            // }else{
            //     this.imageUrl = '';
            // }
            this.imageUrl = row.coverName
            //处理所属项目id
            if(row.parentList){
                let arr = [];
                for (const key in row.parentList) {
                    if (row.parentList.hasOwnProperty(key)) {
                        const element = row.parentList[key];
                        arr.push(element.id);
                    }
                }
                this.columnId = arr;
            }
            this.showDialog = true;
        },
        //取消
        cancelClick(formName){
            this.showDialog = false;
            this.$refs[formName].resetFields();
        },
        //自定义上传
        UploadImage(param){
            const _this = this;
            //获取所属栏目的存储位置
            if(_this.columnId.length != 0){
                getDirColumn(_this.columnId[_this.columnId.length - 1]).then(response => {
                    if(response.code == 200){
                        //上传图片
                        let formData = new FormData();
                        formData.append('photoFile', param.file);
                        formData.append('dir', response.object);
                        formData.append('fileType', this.uploadType);
                        uploadPic(formData).then(response => {
                            if(response.code == 200){
                                if(_this.uploadType == 1){
                                    _this.dataForm.coverName = response.object.saveImage;
                                    _this.imageUrl = response.object.showImage;
                                }else if(_this.uploadType == 2){
                                    _this.dataForm.name = response.object.saveImage;
                                    _this.videoUrl = response.object.showImage;
                                }
                            }else{
                                this.$message.error(response.message);
                            }
                        })
                    }else{
                        this.$message.error(response.message);
                    }
                })
            }else{
                this.$message.warning('请先选择所属栏目');
            }
        },
        //准备上传
        beforeAvatarUpload(file){
            // const isJPG = file.type === 'image/jpeg' || 'image/png' || 'image/jpg' || 'image/gif' ||'image/JPEG' || 'image/PNG' || 'image/JPG' || 'image/GIF';
            // const isLt2M = file.size / 1024 / 1024 < 2;

            // if (!isJPG) {
            //     this.$message.error('上传图片只能是 jpeg、png、jpg、gif 格式!');
            // }
            // if (!isLt2M) {
            //     this.$message.error('上传图片大小不能超过 2MB!');
            // }
            // return isJPG && isLt2M;
        },
        //启用禁用
        statusClick(row){
            let usingStatus,isUsing;
            if(row.usingStatus == 1){  //启用状态
                usingStatus = 0;
                isUsing = '禁用';
            }else{
                usingStatus = 1;
                isUsing = '启用';
            }

            let _this = this;
            this.$confirm('确定修改状态为 '+ isUsing +' 吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //启用禁用
                releaseRecord({id: row.id, usingStatus:usingStatus}).then(response => {
                    if(response.code == 200){
                        this.$message.success(response.message);
                        _this.init();
                    }else{
                        this.$message.error(response.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //放大图片
        enlargeFun(type,pic){
            this.showPicDialog = true;
            this.typeStatus = type;
            this.nowPic = pic;
        },
        //分页
        getList(val) {
            this.nowPage = val - 1;
            this.init();
        },
        fileTypeFun(row){
            if(row.fileType == 1){
                return 'jpg'
            }else if(row.fileType == 2){
                return 'png'
            }else if(row.fileType == 3){
                return 'gif'
            }
        },
        deviceTypeFun(row){
            if(row.deviceType == 1){
                return 'pc'
            }else if(row.deviceType == 2){
                return 'mobile'
            }
        },
        usingStatusFun(row){
            if(row.usingStatus == 1){
                return '启用'
            }else if(row.usingStatus == 0){
                return '禁用'
            }
        },
        nowUpload(val){
            this.uploadType = val;
        },
        parentListFun(row){
            let str = '';
            if(row.parentList){
                for (const key in row.parentList) {
                    if (row.parentList.hasOwnProperty(key)) {
                        const element = row.parentList[key];
                        str += element.name + ' / ';
                    }
                }
            }
            return str.substr(0,str.length-3)
        },
        solutionFun(row){
            let str = '';
            if(row.setMealList){
                for(let i=0;i<row.setMealList.length;i++){
                    str += row.setMealList[i].name + ',';
                }
            }
            return str.substr(0,str.length - 1)
        },
    },
    mounted(){
        this.init();
        this.columnOpt();
        // this.solutionOpt();
    }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>